<template>
  <div class="benchmark">
    <div class="menu" v-if="isfold">
      <div class="logo">
        <div class="name">Admin</div>
      </div>
      <div class="content">
        <div class="content1">
          <el-button @click="dialogFormVisibleMethods({ id: 0 })">+</el-button>
          <el-input placeholder="Enter keywords to filter" v-model="filterText">
          </el-input>
        </div>
        <el-tree
          :data="data"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          :props="defaultProps"
          @node-click="checkContent"
          ref="tree"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button size="mini" @click="dialogFormVisibleMethods(data)">
                +
              </el-button>
              <el-button size="mini" @click="deleteList(data.id)">
                -
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
    </div>
    <div class="container">
      <div class="header">
        <div class="fold">
          <i v-if="isfold" @click="isfold = !isfold" class="el-icon-s-fold"></i>
          <i
            v-if="!isfold"
            @click="isfold = !isfold"
            class="el-icon-s-unfold"
          ></i>
        </div>
        <div class="info">
          <img src="../assets/avatar.png" alt="" />
          <span>Arensn</span>

          <span class="tui"><i class="el-icon-switch-button"></i></span>
        </div>
      </div>
      <div class="main">
        <div class="top">对数据进行编辑</div>
        <div class="local-quill-editor">
          <quill-editor
            ref="myLQuillEditor"
            v-model="content"
            :options="editorOption"
            class="editor"
            @blur="onEditorBlur"
            @focus="onEditorFocus"
            @change="onEditorChange"
          >
            >
          </quill-editor>
        </div>
        <div class="btn">
          <el-button plain @click="editContent">save</el-button>
        </div>
      </div>
    </div>
    <el-dialog title="Add data" :visible.sync="dialogFormVisible">
      <el-form :model="form" status-icon :rules="rules" ref="fromName">
        <el-form-item label="name" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
          <el-input v-model="form.sort" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="describe" :label-width="formLabelWidth" prop="mark">
          <el-input v-model="form.mark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCategory">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 工具栏配置项
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: ["small", false, "large", "huge"] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  ["image", "video"], // 链接、图片、视频-----['link', 'image', 'video']
];

export default {
  created() {
    this.getCategory();
  },
  data() {
    let validatename = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入内容,不能为空"));
      } else {
        callback();
      }
    };
    let validatemark = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入内容,不能为空"));
      } else {
        callback();
      }
    };
    let validatesort = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入内容,不能为空"));
      } else {
        callback();
      }
    };
    return {

      isMenu: true,
      rules: {
        name: [{ validator: validatename, trigger: "blur" }],
        mark: [{ validator: validatemark, trigger: "blur" }],
        sort: [{ validator: validatesort, trigger: "blur" }],
      },
      formLabelWidth: "50px",
      form: {
        name: "",
        sort: "",
        mark: "",
      },
      dialogFormVisible: false,
      id: "",
      isfold: true,
      content: "<img src:'http://192.168.84.168:9080/uploads/avatar(1).png'>",
      contentText:'',
      editorOption: {
        modules: {
          toolbar: toolbarOptions,
        },
        theme: "snow",
        placeholder: "请输入正文",
        // Some Quill optiosn...
      },
      data: [],
      defaultProps: {
        children: "childList",
        label: "name",
      },
      filterText: "",
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

  methods: {
    //对tree过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //点击+弹框与获取节点id
    dialogFormVisibleMethods(data) {
      this.dialogFormVisible = true;
      this.id = data.id;
    },
    //获取tree数据
    getCategory() {
      this.$api.default.getCategory().then((res) => {
        this.data = res.data;
      });
    },
    //添加tree数据
    addCategory() {
      this.$refs.fromName.validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false;
          this.$api.default
            .addCategory({
              name: this.form.name,
              mark: this.form.mark,
              pid: this.id,
            })
            .then(() => {
              this.$message({
                message: "Added successfully",
                type: "success",
              });
              this.getCategory();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //删除tree数据
    deleteList(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "submit",
        cancelButtonText: "cancel",
        type: "warning",
      })
        .then(() => {
          this.$api.default.deleteCategory(id).then(() => {
            this.getCategory();
            this.$message({
              type: "success",
              message: "Delete succeeded!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "Deletion cancelled",
          });
        });
    },
    //点击节点事件
    checkContent(data) {
      this.id = data.id;
      this.$api.default.checkContent(data.id).then((res)=>{
        console.log(res)
      })
    
    },
    //编辑内容
    editContent(){
      this.$api.default.checkContent(data.id)
    },


    // 失去焦点事件
    onEditorBlur(e) {
      console.log("onEditorBlur: ", e);
    },
    // 获得焦点事件
    onEditorFocus(e) {
      console.log("onEditorFocus: ", e);
    },
    // 内容改变事件
    onEditorChange(e) {
      console.log("onEditorChange: ", e);
      this.contentText = e.text
    },
  },
};
</script>

<style lang="scss" scoped>
.benchmark {
  width: 100%;
  min-height: 100vh;
  display: flex;
  position: relative;
  .menu {
    width: 400px;
    min-height: 100vh;
    background-color: #191a23;
    .logo {
      height: 76px;
      background-color: #191a23;
      text-align: center;
      font-family: sans-serif;
      line-height: 1.15;
      color: #ebebec;
      font-size: 28px;
      font-weight: 200;
      line-height: 76px;
      border-bottom: solid 2px #101117;
    }
    .content {
      padding-top: 10px;
      padding-left: 24px;
      .content1 {
        padding: 0 24px 0 0;
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
        ::v-deep .el-input {
          flex: 1;
          height: 40px;
          border: #101117;
          .el-input__inner {
            background-color: #191a23;
            color: #ebebec;
          }
        }
        ::v-deep {
          .el-button {
            background-color: #191a23;
            color: #ebebec;
            margin-right: 10px;
          }
        }
      }
      ::v-deep {
        .el-tree {
          background-color: #191a23;
          .el-tree-node__content {
            background-color: #191a23;
            height: 35px;
            .custom-tree-node {
              color: #b9b9bc;
              font-size: 14px;
              line-height: 1.5;
              padding-right: 22px;
              width: 90%;
              .el-button {
                float: right;
                width: 30px;
                height: 30px;
                padding: 0;
                background: #191a23;
                color: #fff;
              }
            }
          }
          .el-tree-node__content:hover {
            background-color: transparent;
          }
          .el-tree-node__children {
            .el-tree-node__content {
              background-color: #101117;
            }
          }
        }
      }
    }
  }
  .container {
    flex: 1;
    .header {
      height: 76px;
      background: #191a23;
      padding-right: 20px;
      display: flex;
      justify-content: space-between;
      .fold {
        height: 100%;
        width: 55px;
        padding: 0 12px;
        line-height: 76px;
        i {
          font-size: 24px;
          color: #fff;
        }
      }
      .info {
        height: 100%;
        padding: 0 12px;
        line-height: 76px;
        display: flex;
        align-items: center;
        .tui {
          margin-left: 10px;
          font-size: 20px;
        }
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin-right: 10px;
        }
        span {
          font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
            Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
          color: #fff;
        }
      }
    }
    .main {
      padding: 10px;
      .top {
        height: 50px;
        padding-left: 20px;
        background: #fff;
        line-height: 50px;
        color: #17233d;
        font-weight: 500;
        font-size: 20px;
        font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
          Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
      }
      .local-quill-editor {
        padding: 10px;
        padding: 10px;
        background: #fff;
        margin-top: 10px;
        ::v-deep {
          .quill-editor{
          }
          .ql-toolbar {
            border: none;
            background: #fff;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            padding: 10px 0 10px 0;
            border-bottom: 2px solid #e8eaec;
          }
          .ql-container {
            border: none;
            background: #fff;
            font-size: 14px;
            border-bottom: 2px solid #e8eaec;
            height: 400px;
          }
        }
      }
      .btn {
        height: 100px;
        background: #fff;
        padding-left: 10px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .benchmark {
    .menu{
      width: 200px;
    }
    .container{
      .main{
        .local-quill-editor{
          ::v-deep{
            .ql-toolbar{
              height: auto;
            }
          }
        }
      }
    }
  }
}
</style>
